<template>
	<div class="cl-cantainer container">
		<div class="row">
			<div class="col-md-9 cl-left">

				<div class="cl-card" v-for="item in articleList" :key="item.article_id">
					<div class="row">
						<div class="col-lg-3 col-md-4 col-sm-12 cl-card-image" v-if="item.cover_image">
							<a :href="'/#/detail?article_id='+item.article_id">
								<img :src="item.cover_image" class="img-fluid" alt="">
							</a>
						</div>
						<div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
							<h3 class="cl-card-main-title">
								<a :href="'/#/detail?article_id='+item.article_id">
									{{ item.article_title }}
								</a>
							</h3>
							<p class="cl-card-main-info">{{ item.intro }}</p>
							<p class="cl-card-more">
								<a :href="'/#/detail?article_id='+item.article_id">
									阅读更多...
								</a>
							</p>
						</div>
					</div>
				</div>

				<nav aria-label="Page navigation example">
					<ul class="pagination justify-content-center">
						<li class="page-item" :class="{disabled: paginator.page==1}">
							<a class="page-link" aria-label="Previous" :href="'#page='+(paginator.page-1)" @click="getArticleList(paginator.page-1)">
								<span aria-hidden="true">&laquo;</span>
								<span class="sr-only">Previous</span>
							</a>
						</li>

						<li v-for="item in paginator.pages" :key="item" class="page-item" :class="{active:paginator.page==item}" @click="getArticleList(item)">
							<a class="page-link" :href="'#page='+item">{{ item }}</a>
						</li>

						<li class="page-item" :class="{disabled: paginator.page==paginator.totalPage}">
							<a class="page-link" :href="'#page='+(paginator.page+1)" aria-label="Next" @click="getArticleList(paginator.page+1)">
								<span aria-hidden="true">&raquo;</span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>

			</div>

			<co-middle-right></co-middle-right>

		</div>

	</div>
</template>

<script>
	import MiddleRight from "./MiddleRight.vue"
	import axios from "axios"

	export default {
		name: 'Middle',
		data: function() {
			return {
				articleList: [],
				page: 1,
				page_size: 3,
				total: 0,
				category_id: 0
			};
		},
		created: function() {
			this.getArticleList(1);
		},
		methods: {
			getArticleList: function(page) {
				// this.category_id = getQueryParam('category_id');
				this.category_id = this.$route.query.category_id;
				let _this = this;
				axios.get('http://localhost:8901/api/article/list', {
						params: {
							page: page,
							page_size: _this.page_size,
							category_id: this.category_id //获取分类id传给接口
						}
					})
					.then(function(response) {
						if (response.data.status == 0) { // 服务端成功处理
							_this.page = page;
							_this.articleList = response.data.data.articleList;
							_this.total = response.data.data.total;
						} else {
							alert("获取文章列表失败，具体信息：" + response.data.message);
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		watch:{
			$route:function(newVal){
				this.category_id = newVal.query.category_id;
				this.getArticleList(1);
			}
		},
		computed: {
			paginator: function() {
				//  当前页，  每页显示几条记录， 总条目数
				let result = {
					range: 2, // 页码每边显示几条
					page: this.page, //  当前页
					page_size: this.page_size, // 每页显示几条记录
					total: this.total, // 总条目数
					pages: [] // 要显示的页码列表
				};
				result.count = result.range * 2 + 1; // 总的显示的分页数
				result.totalPage = Math.ceil(result.total / result.page_size); // 总页码数

				let temp = result.totalPage - result.page;
				let start = Math.max(1, (temp < 2) ? (result.page - (result.count - 1) + temp) : result.page - 2);
				let end = Math.min(result.page + (result.count - 1), result.totalPage);
				for (let i = start; i <= end; i++) {
					result.pages.push(i);
					if (result.pages.length >= result.count) {
						break;
					}
				}
				console.log(result);

				return result;
			}
		},
		components: {
			'co-middle-right': MiddleRight
		}
	}
</script>

<style>
</style>
